<template>
  <view class="page-list">
    <view class="search-area">
      <view class="cu-bar bg-white">
        <view class="search-form round">
          <text class="cuIcon-search"></text>
          <input placeholder='请输入搜索关键词' @confirm="onSearch" v-model="keyword" />
          <view class="action del" v-if="keyword != ''" @click="keyword = ''">x</view>
        </view>
      </view>
    </view>

    <view class="list-scroll">
      <view v-for="item of listData" :key="item.id" class="list-item" @click="handleToLawyerCard(item)">
        <view class="left-area">
          <image :src="item.avatar" />
        </view>
        <view class="right-area">
          <view class="name-role">
            <text class="name">{{ item.name }}</text>
            <text class="role">{{ item.role }}</text>
          </view>
          <view class="desc">
            <text>{{ item.desc }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { getLawyerList } from '@/mockData/lawyerControl'

interface Params {
  keyword?: string
}
const keyword = ref('');
const listData = ref<any[]>([])
const params = reactive<Params>({})

onLoad(async () => {
  getList({})
})

const getList = async (params: Params) => {
  const list = getLawyerList(params);
  listData.value = list
}

const onSearch = (e) => {
  params.keyword = e.detail.value
  getList(params)
}

const handleToLawyerCard = (item) => {
  uni.navigateTo({ url: `/pages/lawyerCard/lawyerCard?id=${item.id}` })
}


</script>

<style lang="scss" scoped>
.search-area {
  position: fixed;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  line-height: 90rpx;

  .del {
    border-radius: 50%;
    width: 30rpx;
    height: 30rpx;
    background-color: #ccc;
    color: #fff;
  }
}

.list-scroll {
  margin-top: 110rpx;
  padding-bottom: 26rpx;
  width: 100%;
  background: #f5f6f7;

  .list-item {
    display: flex;
    flex-direction: row;
    margin: 10rpx 0;
    padding: 20rpx 30rpx;
    background: #fff;

    .left-area {
      overflow: hidden;
      border-radius: 16rpx;
      width: 140rpx;
      height: 140rpx;

      image {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }

    .right-area {
      flex: 1;
      margin-left: 30rpx;

      .name-role {
        .name {
          font-weight: bold;
          font-size: 20px;
        }

        .role {
          margin-left: 60rpx;
          font-weight: 500;
          color: #2a4791;
        }
      }

      .desc {
        margin-top: 20rpx;
        font-size: 12px;
      }
    }
  }
}
</style>
@/mockData/lawyerControl
